<template>
  <div class="addSpace">
    <!-- 新增空间 -->
    <showBanner class="white"></showBanner>
    <ul class="tabs">
      <li class="li-tab" v-for="(item,index) in tabsParam" :key="index" :class="{active:index==activeNum - 1}">{{item}}</li>
    </ul>
    <!-- 基本信息 -->
    <div v-show="this.activeNum===1" style="width:1200px;margin-top:50px">
      <el-form ref="spaceInfoform" :rules="rules" :model="spaceInfoform" :label-position="labelPosition" :inline="true" label-width="150px" @submit.native.prevent validate-on-rule-change>
        <el-form-item label="空间名称：" prop="spaceName">
          <template>
            <el-input v-model="spaceInfoform.spaceName" maxlength="100" style="width:525px;margin-top:-8px;" placeholder="请输入空间名称"></el-input>
          </template>
        </el-form-item><br>
        <el-form-item label="空间logo：" prop="avatar" style="margin-top:60px">
          <span class="require">*</span>
          <div class="uploadBox">
            <!-- <el-upload action="" list-type="picture-card" :file-list="fileList1" :class="{disabled:uploadDisabled}" :limit="1" :on-preview="handlePictureCardPreview" :http-request="uploadImg" :on-remove="handleRemove" style="margin-top:20px;margin-left:-65px">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="spaceInfoform.avatar" alt="">
            </el-dialog> -->
            <el-upload :action="uploadImgUrl" :show-file-list="false" name="items" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" style="margin-top:-50px;margin-left:0px">
              <img v-if="imgUrlAvatar" :src="imgUrlAvatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height:150px"></i>
            </el-upload>
            <span v-if="imgLoadAvatar" style="font-size:12px;color: #ff7875">图片上传中，请耐心等待</span>
          </div>
        </el-form-item>
        <el-form-item label="空间首页图：" prop="cover" style="margin-top:60px">
          <span class="requireCover">*</span>
          <div class="uploadBox">
            <!-- <el-upload class="avatar-uploader" :action="uploadImgUrl"  :show-file-list="false" :data="{funName:'setProductImg'}" :limit="1" :http-request="uploadImg" :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload> -->
            <!-- <el-upload action="" list-type="picture-card" :file-list="fileList2" :limit="1" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload" :http-request="uploadImg1" :on-remove="handleRemove" style="margin-top:20px;margin-left:-65px">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
              <img width="100%" :src="spaceInfoform.cover" alt="">
            </el-dialog> -->
            <el-tooltip class="item" effect="dark" content="建议图片尺寸比例为16:9，类型为JPG,PNG,JPEG,大小不超过2M" placement="right">
              <el-upload :action="uploadImgUrl" :show-file-list="false" name="items" :on-success="handleCoverSuccess" :before-upload="beforeCoverUpload" style="margin-top:-50px;margin-left:0px">
                <img v-if="imgUrlCover" :src="imgUrlCover" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height:150px"></i>
              </el-upload>
            </el-tooltip>
            <span v-if="imgLoadCover" style="font-size:12px;color: #ff7875">图片上传中，请耐心等待</span>
          </div>
        </el-form-item>
        <!-- <div class="tips">建议图片尺寸比例为16:9，类型为JPG,PNG,JPEG,大小不超过10M</div> -->
        <br>
        <el-form-item label="空间标题：" prop="title">
          <template>
            <el-input v-model="spaceInfoform.title" maxlength="100" style="width:525px;margin-top:-8px;" placeholder="请输入空间标题"></el-input>
          </template>
        </el-form-item>
        <el-form-item label="空间类型：" prop="type">
          <span class="require">*</span>
          <template>
            <el-select v-model="type" placeholder="请选择空间类型" style="width:525px;margin-top:-8px;">
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="联系方式：" prop="mobile">
          <template>
            <el-input v-model="spaceInfoform.mobile" style="width:525px;margin-top:-8px;" placeholder="请输入手机号码"></el-input>
          </template>
        </el-form-item><br>
        <el-form-item label="建筑风格：" prop="architecturalStyle">
          <span class="require">*</span>
          <template>
            <el-tag :key="index" v-for="(tag, index) in architecturalStyleList" v-if="index<10" closable :disable-transitions="false" @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" maxlength="10" name="architecturalStyle" v-model="architecturalStyle" ref="saveTagInput" size="small" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+新标签</el-button>
          </template>
        </el-form-item><br>
        <el-form-item label="空间特色：" prop="feature">
          <span class="require">*</span>
          <template>
            <el-tag :key="index" v-for="(tag1, index) in featureList" v-if="index<10" closable :disable-transitions="false" @close="handleClose1(tag1)">
              {{tag1}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisibleFeature" maxlength="10" name="feature" v-model="feature" ref="saveTagInputFeature" size="small" @blur="handleInputConfirm1">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInputFeature">+新标签</el-button>
          </template>
        </el-form-item><br>
        <el-form-item label="空间简介：" prop="description">
          <template>
            <el-input type="textarea" :rows="7" style="width:525px;margin-top:-8px;" v-model="spaceInfoform.description"></el-input>
            <el-input type="text" style="display:none"></el-input>
          </template>
        </el-form-item>
        <el-form-item label="空间地址：" prop="address">
          <template>
            <baidu-map class="bm-view" style="height:420px;width:525px;margin-top:-42px" :center="{lng: this.center.lng, lat: this.center.lat}" :dragging="false" :zoom="zoom" :double-click-zoom="false" :map-click="false" :scroll-wheel-zoom="false" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
              <bm-view class="map" style="height:400px;width:525px;margin-top:50px"></bm-view>
              <bm-marker :position="{lng: this.center.lng, lat: this.center.lat}" :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
              </bm-marker>
              <bm-geolocation :showAddressBar="true" :autoLocation="true"></bm-geolocation>
              <bm-control :offset="{width: '10px', height: '10px'}">
                <bm-auto-complete v-model="spaceInfoform.address" :sugStyle="{zIndex: 1}" @searchcomplete.passive="AutocompleteResult">
                  <el-input style="width:525px;margin-top:-280px;" v-model="spaceInfoform.address" @blur="addressPush" placeholder="请输入空间地址(能定位到)"></el-input>
                </bm-auto-complete>
              </bm-control>
              <bm-local-search :keyword="spaceInfoform.address" :location="spaceInfoform.address" :pageCapacity="1" :auto-viewport="true" @markersset="infohtmlset"></bm-local-search>
            </baidu-map>
          </template>
        </el-form-item>
        <el-form-item label="门牌号(选填)：" style="margin-top:70px">
          <template>
            <el-input v-model="spaceInfoform.houseNumber" style="width:525px;margin-top:-8px;" placeholder="请输入详细地址及门牌号"></el-input>
          </template>
        </el-form-item>
      </el-form>
      <div style="margin-top:80px;margin-left:35%">
        <el-button type="primary" @click="onSelectStep('spaceInfoform')">下一步</el-button>
      </div>
    </div>
    <!-- 图片上传 -->
    <div v-show="this.activeNum===2" style="width:1200;margin-top:30px;margin-left:50px">
      <el-form ref="spaceInfoformImg" :rules="rulesImg" :model="spaceInfoformImg" :label-position="labelImg" label-width="150px" @submit.native.prevent validate-on-rule-change :inline="true">
        <el-form-item label="公共区域" prop="des" style="margin-left:25px">
          <el-input v-model="spaceInfoformImg.des" maxlength="100" style="width:460px;margin-top:-28px;" placeholder="请输入公共区域描述"></el-input>
        </el-form-item><br>
        <el-form-item v-show="show=false"><br>
          <el-input placeholder="公共区域" v-model="spaceInfoformImg.roomName" :disabled="true"></el-input>
        </el-form-item><br>
        <el-form-item prop="publicImg" style="margin-left:100px">
          <el-tooltip class="item" effect="dark" content="建议一次性上传图片不要超过10张，记得点击确认上传按钮哦" placement="right">
            <el-upload action="uploadImgUrls" ref="uploadb" :on-success="successPublic" :multiple="multiple" list-type="picture-card" :auto-upload="false" :before-upload="beforePublicUpload" :on-preview="publicPreview" :http-request="uploadImgPublic" :on-remove="handleRemovePublice" style="margin-left:-70px">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-tooltip>
          <el-button type="primary" size="medium" @click="submitPublic" style="margin-top:30px;margin-left:-70px">确认上传</el-button>
          <el-dialog :visible.sync="dialogVisiblePublic" :modal="false">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item><br>
        <!-- <el-form-item>
          <el-button type="primary" @click="submit" style="margin-top:20px;margin-left:-40px">确认上传</el-button>
        </el-form-item> -->
        <!-- </el-form>
      <el-form ref="spaceInfoformPrice" :rules="rulesPrice" :model="spaceInfoformPrice" label-width="100px" validate-on-rule-change> -->
        <el-form-item v-show="this.showRoom" style="margin-top:10px;margin-left:40px">
          <el-form-item label="房间">
            <span class="requireRoom">*</span>
          </el-form-item>
          <div v-for="(room, i) in spaceInfoformImg.rooms" :key="i">
            <el-form-item>
              <el-input v-model="room.roomName" maxlength="100" style="width:160px;margin-left:-8px;margin-top:-8px;" placeholder="请输入房间名称"></el-input>
            </el-form-item>
            <el-form-item :prop="room.roomDes">
              <el-input v-model="room.des" maxlength="100" style="width:460px;margin-left:20px;margin-top:-8px;" placeholder="请输入房间朝向;面积;层高"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" v-if="i===0" @click="add(room,i)" plain style="">新增房间</el-button>
              <el-button type="info" v-if="i!==0" @click="del(room)" plain style="">删除房间</el-button>
            </el-form-item><br>
            <!-- <el-upload action="uploadImgUrl"  :multiple="multiple" list-type="picture-card" :auto-upload="false" :file-list="fileList4[i]" :on-preview="handlePictureCardPreview" :http-request="uploadImgYp" :on-remove="handleRemove" style="margin-top:20px;margin-left:-40px">
              <i class="el-icon-plus"></i>
            </el-upload> -->
            <el-form-item style="margin-left:100px">
              <el-tooltip class="item" effect="dark" content="建议一次性上传图片不要超过10张，记得点击确认上传按钮哦" placement="right">
                <el-upload action="uploadImgUrl" ref="uploada" :on-success="roomSuccess" :multiple="multiple" list-type="picture-card" :auto-upload="false" :on-preview="roomPreview" :before-upload="beforeRoomUpload" :http-request="uploadImgRoom" :on-remove="handleRemoveRoom" style="margin-top:20px;margin-left:-110px">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-tooltip>
              <el-dialog :visible.sync="dialogVisibleRoom" :modal="false">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item><br>
            <el-form-item style="margin-left:100px">
              <el-button type="primary" size="medium" @click="submitRoom(room)" style="margin-top:30px;margin-left:-110px;margin-bottom:20px">确认上传</el-button>
            </el-form-item>
          </div>
        </el-form-item><br>
        <!-- </el-form>
      <el-form ref="spaceInfoformService" :rules="rulesSerice" :model="spaceInfoformService" label-width="100px" validate-on-rule-change> -->
        <el-form-item style="margin-left:30px;margin-top:-40px"><br>
          <el-form-item label="样片上传" prop="ypName">
          </el-form-item>
          <div v-for="(yp,index) in spaceInfoformImg.ypList" :key="index">
            <el-form-item prop="ypName">
              <el-input v-model="yp.roomName" maxlength="100" style="width:160px;margin-top:-8px;" placeholder="请输入摄影师"></el-input>
            </el-form-item>
            <el-form-item :prop="yp.ypDes">
              <el-input v-model="yp.des" maxlength="100" style="width:460px;margin-left:20px;margin-top:-8px;" placeholder="请输入模特"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" v-if="index===0" @click="addYp(yp,index)" plain style="">新增样片</el-button>
              <el-button type="info" v-if="index!==0" @click="delYp(yp)" plain style="">删除样片</el-button>
            </el-form-item><br>
            <el-form-item style="margin-left:100px" :prop="yp.ypImg">
              <el-tooltip class="item" effect="dark" content="建议一次性上传图片不要超过10张，记得点击确认上传按钮哦" placement="right">
                <el-upload action="uploadImgUrl" ref="upload" :multiple="multiple" list-type="picture-card" :before-upload="beforeYpUpload" :auto-upload="false" :on-preview="ypPreview" :on-success="ypSuccess" :http-request="uploadImgYp" :on-remove="handleRemoveYp" style="margin-top:20px;margin-left:-100px">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-tooltip>
              <el-dialog :visible.sync="dialogVisibleYp" :modal="false">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item><br>
            <el-form-item style="margin-left:100px">
              <el-button type="primary" size="medium" @click="submitYp(yp)" style="margin-top:30px;margin-left:-100px;margin-bottom:20px">确认上传</el-button>
            </el-form-item>
          </div>
        </el-form-item>
      </el-form>
      <div style="margin-left:500px">
        <el-tooltip class="item" effect="dark" content="小提示：由于网络等原因，请等图片上绿色小勾都出现后再进行下一步,否则会有部分图片上传失败" placement="top">
          <el-button type="primary" @click="onNextStepScd('spaceInfoformImg')">下一步</el-button>
        </el-tooltip>
      </div>
    </div>
    <!-- 设置价格 -->
    <div v-show="this.activeNum===3" style="width:1200px;margin-left:52px;margin-top:50px">
      <el-form ref="spaceInfoformPrice" :rules="rulesPrice" :model="spaceInfoformPrice" @submit.native.prevent label-width="150px" validate-on-rule-change>
        <el-checkbox v-model="checked">设置全天拍摄时间：</el-checkbox><br>
        <el-form-item v-if="checked" style="margin-top:-28px;margin-left:20px" prop="qtTime">
          <el-time-select v-model="spaceInfoformPrice.startTime" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00'}" placeholder="开始时间"></el-time-select>
          <span>~</span>
          <el-time-select v-model="spaceInfoformPrice.endTime" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00',minTime: spaceInfoformPrice.startTime}" placeholder="结束时间"></el-time-select>
        </el-form-item>
        <el-form-item label="平时价格" v-if="checked" style="margin-top:0px;margin-left:-65px"><span class="fangkuai">■</span></el-form-item>
        <el-form-item label="公共区域" v-if="checked" v-show="typeSpace==1" style="margin-top:-8px;margin-left:-50px" prop="publicPrice">
          <el-input v-model="spaceInfoformPrice.publicPrice" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="整个空间" v-if="checked" v-show="typeSpace==2" style="margin-top:-8px;margin-left:-50px" prop="publicPrice">
          <el-input v-model="spaceInfoformPrice.publicPrice" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checked" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomPrice">
          <el-input v-model="spaceInfoformPrice.roomPrice" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checked" style="margin-top:-62px;margin-left:450px" prop="maxPeople">
          <el-input v-model="spaceInfoformPrice.maxPeople" type="number" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checked" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checked" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipment">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipment" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="numQt[item.name]" type="number" onkeyup="value=value.replace('.','')" v-if="spaceInfoformPrice.admissionEquipment.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;" @change="print"></el-input>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="周末节假日价格" v-if="checked" style="margin-top:-8px;margin-left:-20px"><span class="fangkuaiweek">■</span></el-form-item>
        <el-form-item label="公共区域" v-if="checked" v-show="typeSpace==1" style="margin-top:-8px;margin-left:-50px" prop="publicWeekendPrice">
          <el-input v-model="spaceInfoformPrice.publicWeekendPrice" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="整个空间" v-if="checked" v-show="typeSpace==2" style="margin-top:-8px;margin-left:-50px" prop="publicWeekendPrice">
          <el-input v-model="spaceInfoformPrice.publicWeekendPrice" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checked" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomWeekendPrice">
          <el-input v-model="spaceInfoformPrice.roomWeekendPrice" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checked" style="margin-top:-62px;margin-left:450px" prop="maxPeopleWeekend">
          <el-input v-model="spaceInfoformPrice.maxPeopleWeekend" type="number" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checked" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checked" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipmentWeekend">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipmentWeekend" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="numweekQt[item.name]" type="number" onkeyup="value=value.replace('.','')" v-if="spaceInfoformPrice.admissionEquipmentWeekend.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;"></el-input>
          </el-checkbox-group>
        </el-form-item>
        <!-- </el-form-item> -->
        <el-checkbox v-model="checkSBT">设置上半天拍摄时间：</el-checkbox><br>
        <el-form-item v-if="checkSBT" style="margin-top:-28px;margin-left:20px" prop="sbtTime">
          <template>
            <el-time-select v-model="spaceInfoformPrice.startTimeAm" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00'}" placeholder="开始时间"></el-time-select>
            <span>~</span>
            <el-time-select v-model="spaceInfoformPrice.endTimeAm" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00',minTime: spaceInfoformPrice.startTimeAm}" placeholder="结束时间"></el-time-select>
          </template>
        </el-form-item>
        <el-form-item label="平时价格" v-if="checkSBT" style="margin-top:-8px;margin-left:-65px"><span class="fangkuai">■</span></el-form-item>
        <el-form-item label="公共区域" v-if="checkSBT" v-show="typeSpace==1" style="margin-top:-8px;margin-left:-50px" prop="publicPriceHalfAm">
          <el-input v-model="spaceInfoformPrice.publicPriceHalfAm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="整个空间" v-if="checkSBT" v-show="typeSpace==2" style="margin-top:-8px;margin-left:-50px" prop="publicPriceHalfAm">
          <el-input v-model="spaceInfoformPrice.publicPriceHalfAm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checkSBT" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomPriceHalfAm">
          <el-input v-model="spaceInfoformPrice.roomPriceHalfAm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checkSBT" style="margin-top:-62px;margin-left:450px" prop="maxPeopleAm">
          <el-input v-model="spaceInfoformPrice.maxPeopleAm" type="number" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checkSBT" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checkSBT" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipmentAm">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipmentAm" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="numAmSbt[item.name]" type="number" onkeyup="value=value.replace('.','')" v-if="spaceInfoformPrice.admissionEquipmentAm.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;" @change="print"></el-input>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="周末节假日价格" v-if="checkSBT" style="margin-top:-8px;margin-left:-20px"><span class="fangkuaiweek">■</span></el-form-item>
        <el-form-item label="公共区域" v-if="checkSBT" v-show="typeSpace==1" style="margin-top:-8px;margin-left:-50px" prop="publicWeekendPriceHalfAm">
          <el-input v-model="spaceInfoformPrice.publicWeekendPriceHalfAm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="整个空间" v-if="checkSBT" v-show="typeSpace==2" style="margin-top:-8px;margin-left:-50px" prop="publicWeekendPriceHalfAm">
          <el-input v-model="spaceInfoformPrice.publicWeekendPriceHalfAm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checkSBT" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomWeekendPriceHalfAm">
          <el-input v-model="spaceInfoformPrice.roomWeekendPriceHalfAm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checkSBT" style="margin-top:-62px;margin-left:450px" prop="maxPeopleAmWeekend">
          <el-input v-model="spaceInfoformPrice.maxPeopleAmWeekend" type="number" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checkSBT" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checkSBT" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipmentAmWeekend">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipmentAmWeekend" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="numAmweekSbt[item.name]" type="number" onkeyup="value=value.replace('.','')" v-if="spaceInfoformPrice.admissionEquipmentAmWeekend.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;"></el-input>
          </el-checkbox-group>
        </el-form-item>
        <el-checkbox v-model="checkXBT">设置下半天拍摄时间：</el-checkbox>
        <el-form-item v-if="checkXBT" style="margin-top:-28px;margin-left:20px" prop="xbtTime">
          <template>
            <el-time-select v-model="spaceInfoformPrice.startTimePm" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00'}" placeholder="开始时间"></el-time-select>
            <span>~</span>
            <el-time-select v-model="spaceInfoformPrice.endTimePm" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00',minTime: spaceInfoformPrice.startTimePm}" placeholder="结束时间"></el-time-select>
          </template>
        </el-form-item>
        <el-form-item label="平时价格" v-if="checkXBT" style="margin-top:-8px;margin-left:-65px"><span class="fangkuai">■</span></el-form-item>
        <el-form-item label="公共区域" v-if="checkXBT" v-show="typeSpace==1" style="margin-top:-8px;margin-left:-50px" prop="publicPriceHalfPm">
          <el-input v-model="spaceInfoformPrice.publicPriceHalfPm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="整个空间" v-if="checkXBT" v-show="typeSpace==2" style="margin-top:-8px;margin-left:-50px" prop="publicPriceHalfPm">
          <el-input v-model="spaceInfoformPrice.publicPriceHalfPm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checkXBT" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomPriceHalfPm">
          <el-input v-model="spaceInfoformPrice.roomPriceHalfPm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checkXBT" style="margin-top:-62px;margin-left:450px" prop="maxPeoplePm">
          <el-input v-model="spaceInfoformPrice.maxPeoplePm" type="number" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checkXBT" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checkXBT" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipmentPm">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipmentPm" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="numPmXbt[item.name]" type="number" onkeyup="value=value.replace('.','')" v-if="spaceInfoformPrice.admissionEquipmentPm.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;"></el-input>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="周末节假日价格" v-if="checkXBT" style="margin-top:-8px;margin-left:-20px"><span class="fangkuaiweek">■</span></el-form-item>
        <el-form-item label="公共区域" v-if="checkXBT" v-show="typeSpace==1" style="margin-top:-8px;margin-left:-50px" prop="publicWeekendPriceHalfPm">
          <el-input v-model="spaceInfoformPrice.publicWeekendPriceHalfPm" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="整个空间" v-if="checkXBT" v-show="typeSpace==2" style="margin-top:-8px;margin-left:-50px" prop="publicWeekendPriceHalfPm">
          <el-input v-model="spaceInfoformPrice.publicWeekendPriceHalfPm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checkXBT" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomWeekendPriceHalfPm">
          <el-input v-model="spaceInfoformPrice.roomWeekendPriceHalfPm" type="number" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checkXBT" style="margin-top:-62px;margin-left:450px" prop="maxPeoplePmWeekend">
          <el-input v-model="spaceInfoformPrice.maxPeoplePmWeekend" type="number" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checkXBT" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checkXBT" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipmentPmWeekend">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipmentPmWeekend" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="numPmweekXbt[item.name]" type="number" onkeyup="value=value.replace('.','')" v-if="spaceInfoformPrice.admissionEquipmentPmWeekend.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;"></el-input>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div style="display:flex;justify-content:center;margin-top:100px">
        <!-- <el-button @click="onPrevStepThd()">上一步
        </el-button> -->
        <el-button type="primary" @click="onNextStepThr('spaceInfoformPrice')">下一步</el-button>
      </div>
    </div>
    <!-- 配套服务 -->
    <div v-show="this.activeNum===4" style="width:1200px;margin-left:32px;margin-top:50px">
      <el-form ref="spaceInfoformService" :rules="rulesSerice" :model="spaceInfoformService" label-width="100px" @submit.native.prevent validate-on-rule-change>
        <el-form-item label="提前入住" prop="stayPrice" v-show="this.showRoom">
          <el-input v-model="spaceInfoformService.stayPriceFc" type="number" style="width:168px;margin-top:-8px;" placeholder="请输入方寸平台价格"></el-input>
          <span>/间</span>
          <el-input v-model="spaceInfoformService.stayPriceMd" type="number" style="width:168px;margin-top:-68px;margin-left:50px" placeholder="请输入门店价格"></el-input>
          <span>/间</span>
        </el-form-item>
        <el-form-item label="工作午餐" prop="lunchPrice" v-show="this.showRoom">
          <el-input v-model="spaceInfoformService.lunchPriceFc" type="number" style="width:168px;margin-top:-8px;" placeholder="请输入方寸平台价格"></el-input>
          <span>/人</span>
          <el-input v-model="spaceInfoformService.lunchPriceMd" type="number" style="width:168px;margin-top:-58px;margin-left:50px" placeholder="请输入门店价格"></el-input>
          <span>/人</span>
          <!-- <el-input v-model="spaceInfoform.lunchPriceMd" style="width:168px;margin-top:-8px;margin-left:90px" onkeydown="if(event.keyCode==13){return false;}" placeholder="请输入门店价格"></el-input><span>/人</span> -->
        </el-form-item>
        <el-form-item label="工作晚餐" prop="dinnerPrice" v-show="this.showRoom">
          <el-input v-model="spaceInfoformService.dinnerPriceFc" type="number" style="width:168px;margin-top:-8px;" placeholder="请输入方寸平台价格"></el-input>
          <span>/人</span>
          <el-input v-model="spaceInfoformService.dinnerPriceMd" type="number" style="width:168px;margin-top:-68px;margin-left:50px" placeholder="请输入门店价格"></el-input>
          <span>/人</span>
        </el-form-item>
        <el-form-item label="便利设施" prop="facilities">
          <el-checkbox-group v-model="spaceInfoformService.facilities">
            <el-checkbox v-for="item in facDatas" :label="item" :key="item">{{item}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="拍摄须知" prop="notes">
          <el-input type="textarea" style="width:470px;margin-top:-8px;" :rows="7" v-model="spaceInfoformService.notes" placeholder="提示:拍摄要求请每一条请以中文句号结尾"></el-input>
          <el-input type="text" style="display:none"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-top:100px;margin-left:300px">
        <!-- <el-button @click=" onPrevStepFou()">上一步
        </el-button> -->
        <el-button type="primary" @click="addSpaces('spaceInfoformService')">确认添加</el-button>
      </div>
    </div>
    <div style="margin-top:50px">
      <version></version>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import showBanner from '@/base/showBanner/showBanner'
import ImageCompressor from 'image-compressor.js'
import version from '@/base/version/version'
function filterInput (val) {
  // 这里过滤的是除了英文字母和数字的其他字符
  return val.replace(/[^a-zA-Z0-9_\u4e00-\u9fa5]+$/gi, '')
}
export default {
  name: 'addSpace',
  components: {
    showBanner,
    ImageCompressor,
    version
  },
  data () {
    return {
      id: '',
      tabsParam: ['基本信息', '图片上传', '设置价格', '配套服务'],
      labelPosition: 'right',
      labelImg: 'top',
      // uploadImgUrl: '/api/file/uploadImg',
      UrluploadImg: '/api/file/uploadImg',
      uploadImgUrls: '/api/file/uploadImgs',
      keyword: '',
      center: { lng: 116.404, lat: 39.915 },
      addressList: [],
      lbsList: [],
      zoom: 18,
      dialogVisible: false,
      dialogVisiblePublic: false,
      dialogVisibleRoom: false,
      dialogVisibleYp: false,
      dialogImageUrl: '',
      location: '杭州',
      activeNum: 1,
      // isUpload: true, // 图片是否回填完毕
      // imgPublicLength: '',
      // imgRoomlength: '',
      // imgYpLength: '',
      addRess: '', // 最终传入地址
      multiple: true,
      typeSpace: 1, // 空间类型
      formDatePublic: [],
      formDateRoom: [],
      formDateYp: [],
      imgLoadAvatar: false, // logo上传loading加载
      imgLoadCover: false,
      inputVisible: false, // 风格input框
      inputVisibleFeature: false,
      checked: false, // 是否勾选全天
      checkSBT: false, // 上半天
      checkXBT: false, // 下半天
      showRoom: true, // 判断空间是否是民宿
      type: '',
      // ImgUploadPercent: 0,
      imgUrlAvatar: '',
      imgUrlCover: '',
      architecturalStyle: '',
      feature: '',
      checklist: [],
      spaceId: '',
      imgUrl: [],
      token: '',
      addSteps: '',
      ypIndex: '', // 样片下标
      roomIndex: '', // 房间下标
      architecturalStyleList: [],
      featureList: [],
      // 上传成功标志暂存数组
      tempPublicFileList: [],
      tempRoomFileList: [
      ],
      tempYpFileList: [],
      typeList: [
        {
          value: 1,
          label: '民宿'
        }, {
          value: 2,
          label: '咖啡馆'
        }, {
          value: 3,
          label: '创意空间'
        }, {
          value: 4,
          label: '其他'
        }
      ],
      checkLists: [
        { id: 1, name: '闪光灯' },
        { id: 2, name: '反光板' },
        { id: 3, name: '柔光箱' },
        { id: 4, name: '柔光伞' },
        { id: 5, name: '视频灯' }
      ],
      facDatas: ['衣架', '落地衣架', '挂烫机', 'Wi-Fi', '免费停车'
      ],
      spaceInfoform: {
        spaceName: '',
        avatar: '',
        cover: '',
        mobile: '',
        title: '',
        description: '',
        address: '',
        showAddress: '',
        houseNumber: ''
      },
      // posId: 0, // 房间样片顺序
      // imgPosId: 0, // 图片顺序
      spaceInfoformImg: {
        type: 1,
        des: '',
        roomName: '公共区域',
        paths: [],
        roomPosid: 0,
        rooms: [{
          type: 2,
          des: '',
          roomName: '',
          roomPosid: 0,
          paths: []
        }],
        ypList: [{
          type: 3,
          des: '',
          roomName: '',
          roomPosid: 0,
          paths: []
        }]
      },
      numQt: {}, // 允许进场器材数量数组
      numweekQt: {},
      numAmSbt: {},
      numAmweekSbt: {},
      numPmXbt: {},
      numPmweekXbt: {},
      spaceInfoformPrice: {
        startTime: '08:00',
        endTime: '18:00',
        publicPrice: '',
        roomPrice: '',
        maxPeople: '',
        admissionEquipment: [],
        publicWeekendPrice: '',
        roomWeekendPrice: '',
        maxPeopleWeekend: '',
        admissionEquipmentWeekend: [],
        startTimeAm: '08:00',
        endTimeAm: '12:00',
        publicPriceHalfAm: '',
        roomPriceHalfAm: '',
        maxPeopleAm: '',
        admissionEquipmentAm: [],
        publicWeekendPriceHalfAm: '',
        roomWeekendPriceHalfAm: '',
        maxPeopleAmWeekend: '',
        admissionEquipmentAmWeekend: [],
        startTimePm: '14:00',
        endTimePm: '18:00',
        publicPriceHalfPm: '',
        roomPriceHalfPm: '',
        maxPeoplePm: '',
        admissionEquipmentPm: [],
        publicWeekendPriceHalfPm: '',
        roomWeekendPriceHalfPm: '',
        maxPeoplePmWeekend: '',
        admissionEquipmentPmWeekend: []
      },
      fileListPublic: [],
      spaceInfoformService: {
        stayPriceFc: '',
        stayPriceMd: '',
        lunchPriceFc: '',
        lunchPriceMd: '',
        dinnerPriceFc: '',
        dinnerPriceMd: '',
        facilities: [],
        notes: ''
      }
    }
  },
  watch: {
    $route (to, from) {
      this.ifRouter()
    },
    architecturalStyle (val) {
      this.$nextTick(() => {
        this.architecturalStyle = filterInput(val)
      })
    },
    feature (val) {
      this.$nextTick(() => {
        this.feature = filterInput(val)
      })
    }
  },
  created () {
    this.token = this.userInfo.token
    this.ifRouter()
    if (this.$route.query.type === 1) {
      this.showRoom = true
    } else {
      this.showRoom = false
    }
  },
  mounted () {
    this.ifRouter()
  },
  computed: {
    rules () {
      let obj = {
        spaceName: [
          { required: true, message: '请输入空间名称', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入空间标题', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入正确手机号码', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确手机号码' }
        ],
        description: [
          { required: true, message: '请输入空间简介', trigger: 'blur' },
          { max: 1000, message: '长度不可超过1000个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入空间地址', trigger: 'blur' }
        ]
      }
      return obj
    },
    rulesImg () {
      let obj = {
        des: [
          { required: true, message: '请输入公共区域描述', trigger: 'blur' }
        ]
      }
      return obj
    },
    rulesPrice () {
      let obj = {
        publicPrice: [
          { required: true, message: '请输入公共区域价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ],
        admissionEquipment: [
          { type: 'array', required: true, message: '请至少选择一种器材', trigger: 'change' }
        ],
        admissionEquipmentAm: [
          { type: 'array', required: true, message: '请至少选择一种器材', trigger: 'change' }
        ],
        admissionEquipmentWeekend: [
          { type: 'array', required: true, message: '请至少选择一种器材', trigger: 'change' }
        ],
        admissionEquipmentAmWeekend: [
          { type: 'array', required: true, message: '请至少选择一种器材', trigger: 'change' }
        ],
        admissionEquipmentPm: [
          { type: 'array', required: true, message: '请至少选择一种器材', trigger: 'change' }
        ],
        admissionEquipmentPmWeekend: [
          { type: 'array', required: true, message: '请至少选择一种器材', trigger: 'change' }
        ],
        maxPeople: [
          {
            required: true, message: '请输入人数限制', trigger: 'blur'
          },
          { pattern: /^\d{0,2}$/, message: '只可以输入整数,且最大不超过99' }
        ],
        publicPriceHalfAm: [
          { required: true, message: '请输入公共区域价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ],
        maxPeopleAm: [
          {
            required: true, message: '请输入人数限制', trigger: 'blur'
          },
          { pattern: /^\d{0,2}$/, message: '只可以输入整数,且最大不超过99' }
        ],
        publicPriceHalfPm: [
          { required: true, message: '请输入公共区域价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ],
        maxPeoplePm: [
          {
            required: true, message: '请输入人数限制', trigger: 'blur'
          },
          { pattern: /^\d{0,2}$/, message: '只可以输入整数,且最大不超过99' }
        ],
        publicWeekendPrice: [
          { required: true, message: '请输入节假日公共区域价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ],
        maxPeopleWeekend: [
          {
            required: true, message: '请输入人数限制', trigger: 'blur'
          },
          { pattern: /^\d{0,2}$/, message: '只可以输入整数,且最大不超过99' }
        ],
        publicWeekendPriceHalfAm: [
          { required: true, message: '请输入节假日公共区域价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ],
        maxPeopleAmWeekend: [
          {
            required: true, message: '请输入人数限制', trigger: 'blur'
          },
          { pattern: /^\d{0,2}$/, message: '只可以输入整数,且最大不超过99' }
        ],
        publicWeekendPriceHalfPm: [
          { required: true, message: '请输入节假日公共区域价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ],
        maxPeoplePmWeekend: [
          {
            required: true, message: '请输入人数限制', trigger: 'blur'
          },
          { pattern: /^\d{0,2}$/, message: '只可以输入整数,且最大不超过99' }
        ]
      }
      if (this.showRoom === true) {
        obj.roomPrice = [
          { required: true, message: '请输入房间价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ]
        obj.roomPriceHalfAm = [
          { required: true, message: '请输入房间价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ]
        obj.roomPriceHalfPm = [
          { required: true, message: '请输入房间价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ]
        obj.roomWeekendPrice = [
          { required: true, message: '请输入节假日房间价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ]
        obj.roomWeekendPriceHalfAm = [
          { required: true, message: '请输入节假日房间价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ]
        obj.roomWeekendPriceHalfPm = [
          { required: true, message: '请输入节假日房间价格', trigger: 'blur' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只可以输入数字,小数后不可超过两位' }
        ]
      }
      return obj
    },
    rulesSerice () {
      let obj = {
        facilities: [
          { type: 'array', required: true, message: '请至少选择一个便利设施', trigger: 'change' }
        ],
        notes: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { max: 1000, message: '长度不可超过1000个字符', trigger: 'blur' }
        ]
      }
      return obj
    },
    ...mapGetters([
      'userInfo'
    ]),
    uploadImgUrl: function () {
      return '/api/file/uploadImg?token=' + this.userInfo.token
    }
  },
  methods: {
    // 路由传参判断
    ifRouter () {
      let steps = this.$route.query.addSteps
      if (steps === null || steps === undefined || steps === '') {
        this.activeNum = 1
      } else if (steps === 1) {
        this.activeNum = 2
      } else if (steps === 2) {
        this.activeNum = 3
      } else if (steps === 3) {
        this.activeNum = 4
      }
    },
    // 去重
    uniqueArray (array, key) {
      var result = [array[0]]
      for (var i = 1; i < array.length; i++) {
        var item = array[i]
        var repeat = false
        for (var j = 0; j < result.length; j++) {
          if (item[key] === result[j][key]) {
            repeat = true
            break
          }
        }
        if (!repeat) {
          result.push(item)
        }
      }
      return result
    },
    handleRemovePublice (file, fileList) {
      let imgPublic = this.spaceInfoformImg.paths
      for (let k = 0; k < imgPublic.length; k++) {
        if (file.uid === imgPublic[k].uid) { // 判断删除的文件uid是否为对应数组的文件uid
          imgPublic.splice(k, 1)
        }
      }
    },
    handleRemoveRoom (file, fileList) {
      // console.log(file, fileList)
      for (let i = 0; i < this.spaceInfoformImg.rooms.length; i++) {
        let imgRoom = this.spaceInfoformImg.rooms[i].paths
        // console.log(imgRoom)
        for (let k = 0; k < imgRoom.length; k++) {
          if (file.uid === imgRoom[k].uid) { // 判断删除的文件uid是否为对应数组的文件uid
            imgRoom.splice(k, 1)
          }
        }
      }
    },
    handleRemoveYp (file, fileList) {
      // console.log(file.url)
      for (let i = 0; i < this.spaceInfoformImg.ypList.length; i++) {
        let imgYp = this.spaceInfoformImg.ypList[i].paths
        for (let k = 0; k < imgYp.length; k++) {
          console.log(imgYp[k].uid)
          console.log(file.uid)
          if (file.uid === imgYp[k].uid) { // 判断删除的文件uid是否为对应数组的文件uid
            imgYp.splice(k, 1)
          }
        }
      }
      console.log(this.spaceInfoformImg.ypList)
    },
    // 预览
    publicPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisiblePublic = true
    },
    roomPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisibleRoom = true
    },
    ypPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisibleYp = true
    },
    // 基本信息下一步
    onSelectStep (spaceInfoform) {
      // if (this.spaceInfoform.showAddress) {
      //   this.addRess = this.spaceInfoform.showAddress
      // } else {
      //   this.addRess = this.spaceInfoform.address
      //   if (this.center.lng === 116.404 && this.center.lat === 39.915) {
      //     this.$message({
      //       message: '抱歉，未找到相关地点，请重新定位',
      //       type: 'error'
      //     })
      //     return false
      //   }
      // }
      if (!this.spaceInfoform.showAddress) {
        this.$message({
          message: '抱歉，未找到相关地点，请重新定位',
          type: 'error'
        })
        return false
      }
      this.$refs[spaceInfoform].validate((valid) => {
        if (valid) {
          this.$axios.post('/api/space/addSpaceMessage', {
            spaceName: this.spaceInfoform.spaceName,
            // avatar: this.fileList1.url,
            avatar: this.spaceInfoform.avatar,
            // avatar: JSON.stringify(this.fileList1.url).split('[').join('').split(']').join(''),
            // cover: JSON.stringify(this.fileList2.url).split('[').join('').split(']').join(''),
            // cover: this.fileList2.url,
            cover: this.spaceInfoform.cover,
            title: this.spaceInfoform.title,
            type: this.type,
            mobile: this.spaceInfoform.mobile,
            architecturalStyle: this.architecturalStyleList,
            feature: this.featureList,
            description: this.spaceInfoform.description,
            address: this.spaceInfoform.address,
            showAddress: this.spaceInfoform.showAddress,
            houseNumber: this.spaceInfoform.houseNumber,
            latLong: this.center,
            // latLong: this.center(Array.form(this.center)),
            // latLong: JSON.stringify(this.center),
            userId: this.userInfo.userId
          }).then(response => {
            const res = response.data
            console.log(res)
            if (res.code === '00000000') {
              console.log(res)
              this.$message.success(res.message)
              this.spaceId = res.data.id
              console.log(this.spaceId)
              this.type = res.data.type
              if (this.type === 1) {
                this.showRoom = true
                this.typeSpace = 1
              } else {
                this.showRoom = false
                this.typeSpace = 2
              }
              this.activeNum = 2
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    //  图片上传上一步
    onPrevStepScd () {
      this.activeNum = 1
    },
    //  图片上传下一步
    onNextStepScd (spaceInfoformImg) {
      let arr = [{
        roomName: this.spaceInfoformImg.roomName,
        des: this.spaceInfoformImg.des,
        type: 1,
        roomPosid: 0,
        paths: this.spaceInfoformImg.paths
      }]
      if (this.spaceInfoformImg.paths.length === 0) {
        this.$message.error('公共区域照片不可为空')
        return false
      }
      if (this.showRoom === true) {
        let o = this.spaceInfoformImg.rooms
        for (let i = 0; i < o.length; i++) {
          // if (o[i].paths.length !== 0 && o[i].roomName.length !== 0 && o[i].roomName.length !== 0) {
          //   arr.push(
          //     o[i]
          //   )
          // }
          if (o[i].roomName.length === 0) {
            this.$message.error('房间名称不可为空')
            return false
          } else if (o[i].des.length === 0) {
            this.$message.error('房间描述不可为空')
            return false
          } else if (o[i].paths.length === 0) {
            this.$message.error('房间照片不可为空')
            return false
          } else {
            arr.push(
              {
                roomName: o[i].roomName,
                des: o[i].des,
                type: 2,
                roomPosid: i,
                paths: o[i].paths
              }
            )
          }
        }
      }
      let x = this.spaceInfoformImg.ypList
      console.log(x)
      for (let i = 0; i < x.length; i++) {
        // if (x[i].paths.length !== 0 && x[i].roomName.length !== 0 && x[i].roomName.length !== 0) {
        //   arr.push(
        //     x[i]
        //   )
        // }
        if (x[i].paths.length === 0 && x[i].roomName.length === 0 && x[i].des.length === 0) {
          arr.push()
        } else {
          if (x[i].roomName.length === 0) {
            this.$message.error('摄影师不可为空')
            return false
          } else if (x[i].des.length === 0) {
            this.$message.error('模特不可为空')
            return false
          } else if (x[i].paths.length === 0) {
            this.$message.error('样片照片不可为空')
            return false
          } else {
            arr.push(
              {
                roomName: x[i].roomName,
                des: x[i].des,
                type: 3,
                roomPosid: i,
                paths: x[i].paths
              }
            )
          }
        }
      }
      // console.log(arr)
      let strImg = this.uniqueArray(arr, 'paths')
      // console.log(strImg)
      arr = strImg
      // console.log(arr)
      this.$refs[spaceInfoformImg].validate((valid) => {
        if (valid) {
          this.$axios.post('/api/space/addSpaceImg', {
            id: this.spaceId || this.$route.query.id,
            userId: this.userInfo.userId,
            addSteps: 1,
            rooms: arr
          }
          ).then(response => {
            const res = response.data
            console.log(res)
            if (res.code === '00000000') {
              this.activeNum = 3
              console.log(res)
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    // 设置价格上一步
    onPrevStepThd () {
      this.activeNum = 2
    },
    // 设置价格下一步
    onNextStepThr (spaceInfoformPrice) {
      if (this.checked === true || this.checkSBT === true || this.checkXBT === true) {
        this.$refs[spaceInfoformPrice].validate((valid) => {
          if (valid) {
            let qcQt = JSON.stringify(this.numQt).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
            let str = qcQt.split(',')
            let qcweekQt = JSON.stringify(this.numweekQt).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
            let str2 = qcweekQt.split(',')
            let qcAmSbt = JSON.stringify(this.numAmSbt).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
            let str3 = qcAmSbt.split(',')
            let qcAmweekSbt = JSON.stringify(this.numAmweekSbt).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
            let str4 = qcAmweekSbt.split(',')
            let qcPmXbt = JSON.stringify(this.numPmXbt).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
            let str5 = qcPmXbt.split(',')
            let qcPmweekXbt = JSON.stringify(this.numPmweekXbt).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
            let str6 = qcPmweekXbt.split(',')
            if (this.checked === true) {
              this.spaceInfoformPrice.startTime = '08:00'
              this.spaceInfoformPrice.endTime = '18:00'
              if (qcQt === '') {
                this.$message.error('器材数量不可为空')
                return false
              } else {
                for (let i = 0; i < str.length; i++) {
                  console.log(str[i].substring(4))
                  if (str[i].substring(4) === '') {
                    str.splice(i, 1)
                    qcQt = str.join(',')
                    if (qcQt === '') {
                      this.$message.error('器材数量不可为空')
                      return false
                    }
                    console.log(qcQt)
                    // this.$message.error(str[i].substring(0, 3) + '数量不可为空')
                    // return false
                  }
                }
              }
              if (qcweekQt === '') {
                this.$message.error('器材数量不可为空')
                return false
              } else {
                for (let i = 0; i < str2.length; i++) {
                  console.log(str2[i].substring(4))
                  if (str2[i].substring(4) === '') {
                    str2.splice(i, 1)
                    qcweekQt = str2.join(',')
                    if (qcweekQt === '') {
                      this.$message.error('器材数量不可为空')
                      return false
                    }
                  }
                }
              }
            } else {
              this.spaceInfoformPrice.startTime = ''
              this.spaceInfoformPrice.endTime = ''
            }
            if (this.checkSBT === true) {
              this.spaceInfoformPrice.startTimeAm = '08:00'
              this.spaceInfoformPrice.endTimeAm = '12:00'
              if (qcAmSbt === '') {
                this.$message.error('器材数量不可为空')
                return false
              } else {
                for (let i = 0; i < str3.length; i++) {
                  console.log(str3[i].substring(4))
                  if (str3[i].substring(4) === '') {
                    str3.splice(i, 1)
                    qcAmSbt = str3.join(',')
                    if (qcAmSbt === '') {
                      this.$message.error('器材数量不可为空')
                      return false
                    }
                  }
                }
              }
              if (qcAmweekSbt === '') {
                this.$message.error('器材数量不可为空')
                return false
              } else {
                for (let i = 0; i < str4.length; i++) {
                  console.log(str4[i].substring(4))
                  if (str4[i].substring(4) === '') {
                    str4.splice(i, 1)
                    qcAmweekSbt = str4.join(',')
                    if (qcAmweekSbt === '') {
                      this.$message.error('器材数量不可为空')
                      return false
                    }
                  }
                }
              }
            } else {
              this.spaceInfoformPrice.startTimeAm = ''
              this.spaceInfoformPrice.endTimeAm = ''
            }
            if (this.checkXBT === true) {
              this.spaceInfoformPrice.startTimePm = '14:00'
              this.spaceInfoformPrice.endTimePm = '18:00'
              if (qcPmXbt === '') {
                this.$message.error('器材数量不可为空')
                return false
              } else {
                for (let i = 0; i < str5.length; i++) {
                  console.log(str5[i].substring(4))
                  if (str5[i].substring(4) === '') {
                    str5.splice(i, 1)
                    qcPmXbt = str5.join(',')
                    if (qcPmXbt === '') {
                      this.$message.error('器材数量不可为空')
                      return false
                    }
                  }
                }
              }
              if (qcPmweekXbt === '') {
                this.$message.error('器材数量不可为空')
                return false
              } else {
                for (let i = 0; i < str6.length; i++) {
                  console.log(str6[i].substring(4))
                  if (str6[i].substring(4) === '') {
                    str6.splice(i, 1)
                    qcPmweekXbt = str6.join(',')
                    if (qcPmweekXbt === '') {
                      this.$message.error('器材数量不可为空')
                      return false
                    }
                  }
                }
              }
            } else {
              this.spaceInfoformPrice.startTimePm = ''
              this.spaceInfoformPrice.endTimePm = ''
            }
            this.$axios.post('/api/space/addSpacePrice', {
              id: this.spaceId || this.$route.query.id,
              userId: this.userInfo.userId,
              addSteps: 2,
              startTime: this.spaceInfoformPrice.startTime,
              endTime: this.spaceInfoformPrice.endTime,
              publicPrice: this.spaceInfoformPrice.publicPrice,
              roomPrice: this.spaceInfoformPrice.roomPrice,
              maxPeople: this.spaceInfoformPrice.maxPeople,
              admissionEquipment: qcQt,
              publicWeekendPrice: this.spaceInfoformPrice.publicWeekendPrice,
              roomWeekendPrice: this.spaceInfoformPrice.roomWeekendPrice,
              maxPeopleWeekend: this.spaceInfoformPrice.maxPeopleWeekend,
              admissionEquipmentWeekend: qcweekQt,
              startTimeAm: this.spaceInfoformPrice.startTimeAm,
              endTimeAm: this.spaceInfoformPrice.endTimeAm,
              publicPriceHalfAm: this.spaceInfoformPrice.publicPriceHalfAm,
              roomPriceHalfAm: this.spaceInfoformPrice.roomPriceHalfAm,
              maxPeopleAm: this.spaceInfoformPrice.maxPeopleAm,
              admissionEquipmentAm: qcAmSbt,
              publicWeekendPriceHalfAm: this.spaceInfoformPrice.publicWeekendPriceHalfAm,
              roomWeekendPriceHalfAm: this.spaceInfoformPrice.roomWeekendPriceHalfAm,
              maxPeopleAmWeekend: this.spaceInfoformPrice.maxPeopleAmWeekend,
              admissionEquipmentAmWeekend: qcAmweekSbt,
              startTimePm: this.spaceInfoformPrice.startTimePm,
              endTimePm: this.spaceInfoformPrice.endTimePm,
              publicPriceHalfPm: this.spaceInfoformPrice.publicPriceHalfPm,
              roomPriceHalfPm: this.spaceInfoformPrice.roomPriceHalfPm,
              maxPeoplePm: this.spaceInfoformPrice.maxPeoplePm,
              admissionEquipmentPm: qcPmXbt,
              publicWeekendPriceHalfPm: this.spaceInfoformPrice.publicWeekendPriceHalfPm,
              roomWeekendPriceHalfPm: this.spaceInfoformPrice.roomWeekendPriceHalfPm,
              maxPeoplePmWeekend: this.spaceInfoformPrice.maxPeoplePmWeekend,
              admissionEquipmentPmWeekend: qcPmweekXbt
            }
            ).then(response => {
              const res = response.data
              console.log(res)
              if (res.code === '00000000') {
                this.activeNum = 4
                console.log(res)
                this.$message.success(res.message)
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        this.$message.error('必须勾选一项，否则不能进行下一步操作')
        return false
      }
    },
    // 配套服务上一步
    onPrevStepFou () {
      this.activeNum = 3
    },
    // 确认添加
    addSpaces (spaceInfoformService) {
      var str = this.spaceInfoformService.notes.substr(this.spaceInfoformService.notes.length - 1)
      console.log(str)
      if (str === '.' || str === '。') {
        this.spaceInfoformService.notes = this.spaceInfoformService.notes.substr(0, this.spaceInfoformService.notes.length - 1)
      }
      this.$refs[spaceInfoformService].validate((valid) => {
        if (valid) {
          this.$axios.post('/api/space/addSpaceSupportingServices', {
            id: this.spaceId || this.$route.query.id,
            userId: this.userInfo.userId,
            addSteps: 3,
            stayPriceFc: this.spaceInfoformService.stayPriceFc,
            stayPriceMd: this.spaceInfoformService.stayPriceMd,
            lunchPriceFc: this.spaceInfoformService.lunchPriceFc,
            lunchPriceMd: this.spaceInfoformService.lunchPriceMd,
            dinnerPriceFc: this.spaceInfoformService.dinnerPriceFc,
            dinnerPriceMd: this.spaceInfoformService.dinnerPriceMd,
            facilities: JSON.stringify(this.spaceInfoformService.facilities).split('/').join('').split('"').join('').split('[').join('').split(']').join(''),
            notes: this.spaceInfoformService.notes
          }
          ).then(response => {
            const res = response.data
            console.log(res)
            if (res.code === '00000000') {
              this.$message.success(res.message)
              this.$router.push({ name: 'spaceControl' })
              console.log(res)
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 添加标签
    handleClose (tag) {
      this.architecturalStyleList.splice(this.architecturalStyleList.indexOf(tag), 1)
    },
    handleClose1 (tag1) {
      this.featureList.splice(this.featureList.indexOf(tag1), 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    showInputFeature () {
      this.inputVisibleFeature = true
      this.$nextTick(_ => {
        this.$refs.saveTagInputFeature.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      let architecturalStyle = this.architecturalStyle
      if (architecturalStyle !== '') {
        if (this.architecturalStyleList.indexOf(this.architecturalStyle) !== -1) {
          this.$message.error('请不要输入重复内容')
          this.architecturalStyle = ''
          this.inputVisible = false
        } else {
          this.architecturalStyleList.push(architecturalStyle)
          this.inputVisible = false
          this.architecturalStyle = ''
        }
      } else {
        this.inputVisible = false
      }
    },
    handleInputConfirm1 () {
      let feature = this.feature
      if (feature !== '') {
        if (this.featureList.indexOf(this.feature) !== -1) {
          this.$message.error('请不要输入重复内容')
          this.feature = ''
          this.inputVisibleFeature = false
        } else {
          this.featureList.push(feature)
          this.inputVisibleFeature = false
          this.feature = ''
        }
      } else {
        this.inputVisibleFeature = false
      }
    },
    // 地图
    getClickInfo (e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    AutocompleteResult (e) {
      // console.log(e.Br)
      this.lbsList = e.Br
    },
    syncCenterAndZoom (e) {
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    infohtmlset (e) {
      console.log(e)
      if (e.length !== 0) {
        this.addressList = e[0]
      } else {
        this.addressList = []
      }
    },
    addressPush () {
      if (this.addressList.city) {
        if (this.addressList.address.indexOf(this.addressList.city) !== -1) {
          this.spaceInfoform.showAddress = this.addressList.address
        } else {
          this.spaceInfoform.showAddress = this.addressList.city + this.addressList.address
        }
      } else {
        this.spaceInfoform.showAddress = this.addressList.address
      }
    },
    // 上传成功
    handleAvatarSuccess (res, file) {
      console.log(file)
      if (res.code === '40400001' || res.code === '40400002' || res.code === '40400003' || res.code === '40400004' || res.code === '40400005' || res.code === '40400006' || res.code === '40400007' || res.code === '40400008') {
        this.$message({
          message: res.message,
          type: 'error'
        })
        this.$router.push({ name: 'login' })
      }
      this.imgUrlAvatar = URL.createObjectURL(file.raw)
      console.log(this.imgUrlAvatar)
      if (res.code === '00000000') {
        this.$message({
          message: '空间logo添加成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
      console.log(res.code)
      this.spaceInfoform.avatar = res.url
      this.imgLoadAvatar = false
      console.log(this.spaceInfoform.avatar)
    },
    handleCoverSuccess (res, file) {
      console.log(file)
      if (res.code === '40400001' || res.code === '40400002' || res.code === '40400003' || res.code === '40400004' || res.code === '40400005' || res.code === '40400006' || res.code === '40400007' || res.code === '40400008') {
        this.$message({
          message: res.message,
          type: 'error'
        })
        this.$router.push({ name: 'login' })
      }
      this.imgUrlCover = URL.createObjectURL(file.raw)
      if (res.code === '00000000') {
        this.$message({
          message: '空间首页图添加成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
      this.spaceInfoform.cover = res.url
      this.imgLoadCover = false
    },
    // 上传图片限制
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是 PNG、JPG、JPEG 格式!')
        this.imgLoadAvatar = false
      }
      if (!isLt2M) {
        this.$message.error('上传logo大小不能超过 2MB!')
        this.imgLoadAvatar = false
      } else {
        this.imgLoadAvatar = true
      }
      return isJPG && isLt2M
    },
    beforeCoverUpload (file) {
      console.log(file)
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是 PNG、JPG、JPEG 格式!')
        this.imgLoadCover = false
      }
      if (!isLt2M) {
        this.$message.error('上传空间首页图大小不能超过 2MB!')
        this.imgLoadCover = false
      } else {
        this.imgLoadCover = true
      }
      return isJPG && isLt2M
    },
    beforePublicUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJPG) {
        this.$message.error('上传图片只能是 PNG、JPG、JPEG 格式!')
      } else {
        this.$message('图片正在上传中，请等待')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    beforeRoomUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJPG) {
        this.$message.error('上传图片只能是 PNG、JPG、JPEG 格式!')
      } else {
        this.$message('图片正在上传中，请等待')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    beforeYpUpload (file) {
      console.log('before')
      const isLt2M = file.size / 1024 / 1024 < 2
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJPG) {
        this.$message.error('上传图片只能是 PNG、JPG、JPEG 格式!')
      } else {
        this.$message('图片正在上传中，请等待')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 图片压缩比例
    async compressImg (file) {
      let resultImg
      const imageCompressor = new ImageCompressor()
      if (file.size < 1024 * 1024 * 1) {
        resultImg = file
      } else if (file.size > 1024 * 1024 * 1 && file.size < 2 * 1024 * 1024) {
        resultImg = await imageCompressor.compress(file, { quality: 0.8 })
      }
      return resultImg
    },
    // 房间图片上传
    async uploadImgRoom (a, file) {
      // 写在异步方法的前边进行赋值，深拷贝赋值，不要用浅拷贝
      let indexRoom = JSON.parse(JSON.stringify(this.roomIndex))
      // console.log(indexRoom)
      const resultImg = await this.compressImg(a.file)
      this.formDateRoom = new FormData()
      this.formDateRoom.append('items', resultImg)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      if (this.formDateRoom.getAll('items') === null || this.formDateRoom.getAll('items').length === 0) {
        this.$message({
          message: '当前图片添加为空,请重新上传',
          type: 'warning'
        })
      } else {
        this.$axios.post(this.uploadImgUrls, this.formDateRoom, config).then((res) => {
          if (res.data.code === '00000000') {
            for (let i = 0; i < this.tempRoomFileList.length; i++) {
              for (let e = 0; e < this.tempRoomFileList[i].length; e++) {
                let tempFile = this.tempRoomFileList[i][e]
                if (tempFile.uid === a.file.uid) {
                  tempFile.status = 'success'
                }
              }
            }
            console.log(a.file.uid)
            for (let k = 0; k < res.data.url.length; k++) {
              this.spaceInfoformImg.rooms[indexRoom].paths.push({
                url: res.data.url[k].url,
                uid: a.file.uid
              })
            }
            console.log(this.spaceInfoformImg.rooms[indexRoom].paths)
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        })
      }
    },
    roomSuccess (response, file, fileList) {
      // console.log(fileList)
      file.status = 'ready'
      if (this.tempRoomFileList.indexOf(fileList) === -1) {
        this.tempRoomFileList.push(fileList)
      }
      // console.log(this.tempRoomFileList)
    },
    ypSuccess (response, file, fileList) {
      file.status = 'ready'
      if (this.tempYpFileList.indexOf(fileList) === -1) {
        this.tempYpFileList.push(fileList)
      }
      console.log(fileList)
    },
    successPublic (response, file, fileList) {
      file.status = 'ready'
      this.tempPublicFileList = fileList
      console.log(this.tempPublicFileList)
    },
    // 样片图片上传
    async uploadImgYp (a, fileList) {
      let indexYp = JSON.parse(JSON.stringify(this.ypIndex))
      const resultImg = await this.compressImg(a.file)
      this.formDateYp = new FormData()
      this.formDateYp.append('items', resultImg)
      console.log(this.formDateYp.getAll('items'))
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      if (this.formDateYp.getAll('items') === null || this.formDateYp.getAll('items').length === 0) {
        this.$message({
          message: '当前图片添加为空,请重新上传',
          type: 'warning'
        })
      } else {
        this.$axios.post(this.uploadImgUrls, this.formDateYp, config).then((res) => {
          if (res.data.code === '00000000') {
            for (let i = 0; i < this.tempYpFileList.length; i++) {
              for (let e = 0; e < this.tempYpFileList[i].length; e++) {
                let tempFile = this.tempYpFileList[i][e]
                if (tempFile.uid === a.file.uid) {
                  tempFile.status = 'success'
                }
              }
            }
            for (let k = 0; k < res.data.url.length; k++) {
              this.spaceInfoformImg.ypList[indexYp].paths.push({
                url: res.data.url[k].url,
                uid: a.file.uid
              })
            }
            console.log(this.spaceInfoformImg.ypList[indexYp].paths)
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        })
      }
    },
    // 公共区域图片上传
    async uploadImgPublic (a) {
      const resultImg = await this.compressImg(a.file)
      // console.log(resultImg)
      this.formDatePublic = new FormData()
      this.formDatePublic.append('items', resultImg)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      if (this.formDatePublic.getAll('items') === null || this.formDatePublic.getAll('items').length === 0) {
        this.$message({
          message: '当前图片添加为空,请重新上传',
          type: 'warning'
        })
      } else {
        this.$axios.post(this.uploadImgUrls, this.formDatePublic, config).then((res) => {
          if (res.data.code === '00000000') {
            // console.log(a.file.uid)
            // console.log(this.tempPublicFileList)
            // 遍历文件数组，找到数组里等于当前上传成功的文件uid的文件，将文件状态设为'success'
            this.imgPublicLength = this.tempPublicFileList.length
            for (let k = 0; k < this.tempPublicFileList.length; k++) {
              let tempFile = this.tempPublicFileList[k]
              if (tempFile.uid === a.file.uid) {
                tempFile.status = 'success'
              }
            }
            for (let k = 0; k < res.data.url.length; k++) {
              this.spaceInfoformImg.paths.push({
                url: res.data.url[k].url,
                uid: a.file.uid
              })
            }
            console.log(this.spaceInfoformImg.paths)
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            // 判断上传成功数组与回填完毕数组长度是否一致
            // if (this.imgPublicLength === this.spaceInfoformImg.paths.length) {
            //   this.isUpload = false
            // }
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        })
      }
    },
    // 点击上传
    submitPublic () {
      this.$refs.uploadb.submit()
    },
    submitRoom (room) {
      let i = this.spaceInfoformImg.rooms.indexOf(room)
      console.log(room)
      if (i !== -1) {
        this.roomIndex = i
        this.$refs.uploada[i].submit()
        // console.log('submit')
      }
    },
    submitYp (yp) {
      let index = this.spaceInfoformImg.ypList.indexOf(yp)
      if (index !== -1) {
        this.ypIndex = index
        this.$refs.upload[index].submit()
        // console.log('submit')
      }
    },
    add (room, i) {
      this.spaceInfoformImg.rooms.push({
        roomName: '',
        des: '',
        type: 2,
        paths: []
      })
    },
    addYp (yp, index) {
      this.spaceInfoformImg.ypList.push({
        roomName: '',
        des: '',
        type: 3,
        paths: []
      })
    },
    del (item) {
      var i = this.spaceInfoformImg.rooms.indexOf(item)
      if (i !== 0) {
        this.spaceInfoformImg.rooms.splice(i, 1)
        console.log(i)
      }
    },
    delYp (item) {
      var index = this.spaceInfoformImg.ypList.indexOf(item)
      if (index !== 0) {
        this.spaceInfoformImg.ypList.splice(index, 1)
      }
    },
    print (val) {
      console.log(val)
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.addSpace
  margin 16px
  background #fff
  min-height 800px
  font-weight 600
  padding-bottom 28px
  .content
    padding 16px
    display flex
    justify-content center
  .li-tab
    padding 16px
    // width 20%
    height 100%
    font-size 16px
    color #333333
    text-align center
    margin-left 8%
    display inline-block
    font-family PingFangSC
    img
      background-size contain
  .active
    color #001529
    padding-bottom 5px
    border-bottom 3px solid #001529
  .require
    color #f56c6c
    position absolute
    left -90px
    top 0
  .requireCover
    color #f56c6c
    position absolute
    left -106px
    top 0
  .requireRoom
    color #f56c6c
    position absolute
    left -10px
    top -48px
  .tips
    width 400px
    font-size 12px
    font-family microsoft yahei
    color rgba(249, 53, 70, 1)
    margin-left 150px
    margin-bottom 10px
  .fangkuai
    font-size 18px
    margin-left -85px
  .fangkuaiweek
    font-size 18px
    margin-left -127px
.el-tag + .el-tag
  margin-left 10px
.button-new-tag
  margin-left 10px
  height 32px
  line-height 30px
  padding-top 0
  padding-bottom 0
.input-new-tag
  width 100px
  margin-left 10px
  vertical-align bottom
</style>
<style>
.el-tag {
  background-color: transparent !important;
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  color: #000000 !important;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #dd6666 !important;
  white-space: nowrap;
}
.el-tag .el-icon-close {
  border: 1px solid #dd6666 !important;
  border-radius: 50%;
  text-align: center;
  background: #ffffff;
  position: relative;
  cursor: pointer;
  font-size: 12px;
  height: 16px;
  width: 16px;
  line-height: 16px;
  top: -16px !important;
  right: -19px !important;
  color: #dd6666 !important;
}
.el-tag .el-icon-close:hover {
  background: #ffffff !important;
  color: #dd6666 !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
